<template>
  <div class="index">
    <el-form ref="form" :model="form" label-width="180px">
      <div class="form-container" v-for="(item, index) in form" :key="index">
        <div class="form-box" v-show="showCondition(item)">
          <p @click="clickTitle(item.title)" class="title">{{ item.title }}</p>
          <div v-for="(rtem, idx) in item.items" :key="idx">
            <el-form-item
              v-if="showCondition(rtem)"
              :label="rtem.label"
              prop=""
            >
              <el-radio-group v-if="rtem.type == 'radio'" v-model="rtem.value">
                <el-radio-button
                  v-for="(r, i) in getOptions(rtem)"
                  :key="i"
                  :label="r.value"
                  :value="r.value"
                  :disabled="setDisable(r, rtem)"
                  >{{ r.label }}{{ r.value }}</el-radio-button
                >
              </el-radio-group>
              <el-select
                v-if="rtem.type == 'select'"
                v-model="rtem.value"
                placeholder="请选择"
              >
                <el-option
                  v-for="r in getOptions(rtem)"
                  :key="r.value"
                  :label="r.label"
                  :value="r.value"
                  :disabled="setDisable(r, rtem)"
                >
                </el-option>
              </el-select>
              <template
                v-if="rtem.type == 'input' && rtem.valueType == 'number'"
              >
                <el-input-number
                  :placeholder="rtem.placeholder || '请输入'"
                  v-model="rtem.value"
                  :min="rtem.min"
                  :max="rtem.max"
                ></el-input-number>
                <span>{{ rtem.unit }}</span>
              </template>
            </el-form-item>
          </div>
        </div>
      </div>
      <el-form-item label="" prop="">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="primary" @click="origin = origin == 2 ? 1 : 2"
          >change{{ origin }}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      /**
       *
       */
      origin: 1,
      form: {
        rules: {
          title: "规则配置",
          items: {
            ruleTitle: {
              type: "radio",
              value: 2,
              label: "标题包规则",
              options: [
                {
                  label: "自动匹配",
                  value: 1,
                },
                {
                  label: "程序化匹配",
                  value: 2,
                },
              ],
            },
            ad: {
              type: "radio",
              label: "多广告分配",
              value: 1,
              condition: ["rules.items.ruleTitle:2"],
              options: [
                {
                  label: "关闭",
                  value: 1,
                },
                {
                  label: "开启",
                  value: 2,
                },
              ],
            },
            ruleType: {
              type: "radio",
              label: "多账户分配规则",
              value: 1,
              condition: ["rules.items.ruleTitle:2"],
              valueType: "number",
              options: [
                {
                  label: "全量分配",
                  value: 1,
                },
                {
                  label: "按创意组分配",
                  value: 2,
                },
                {
                  label: "1户1标题包",
                  value: 3,
                  // 能否选中
                  // 当rules.items.ad==1时禁用该选项，若选中项为当前选项，将选中值改为1
                  unTouchable: ["rules.items.ad:1:1"],
                  // 当前值为4时，重置选中项（被替换的项可能与当前选项值value不一致），可能导致视图不更新
                  disabledVal: 4,
                },
              ],
              // 当rules.items.ad==2时，使用replaceOptions作为options
              replaceCondition: ["rules.items.ad:2"],
              replaceOptions: [
                {
                  label: "全量分配",
                  value: 1,
                },
                {
                  label: "按创意组分配",
                  value: 2,
                  // 能否选中
                  unTouchable: ["rules.items.ad:2:1"],
                },
                {
                  label: "按标题包分配",
                  value: 4,
                },
              ],
            },
          },
        },
        target: {
          title: "投放内容与目标",
          condition: ["rules.items.ruleType:2", "rules.items.ad:1"],
          items: {
            targetTitle: {
              type: "radio",
              value: "WECHAT_APP",
              label: "投放内容",
              condition: [
                "rules.items.ruleTitle:2",
                "rules.items.ad:1",
                "rules.items.ruleType:2",
              ],
              options: [
                {
                  label: "微信小程序",
                  value: "WECHAT_APP",
                },
                {
                  label: "字节小程序",
                  value: "BITE_APP",
                },
              ],
            },
            target: {
              type: "select",
              label: "优化目标",
              value: "AD_CONVERT_TYPE_PAY",
              condition: ["rules.items.ruleType:2", "rules.items.ad:1"],
              options: [
                {
                  value: "AD_CONVERT_TYPE_CLICK_NUM",
                  label: "点击量",
                },
                {
                  value: "AD_CONVERT_TYPE_SHOW_OFF_NUM",
                  label: "展示量",
                },
                {
                  value: "AD_CONVERT_TYPE_ACTIVE",
                  label: "激活",
                },
                {
                  value: "AD_CONVERT_TYPE_ACTIVE_REGISTER",
                  label: "注册",
                },
                {
                  value: "AD_CONVERT_TYPE_PAY",
                  label: "付费",
                },
                {
                  value: "AD_CONVERT_TYPE_GAME_ADDICTION",
                  label: "关键行为",
                },
                {
                  value: "AD_CONVERT_TYPE_APP_ORDER",
                  label: "app内下单",
                },
                {
                  value: "AD_CONVERT_TYPE_APP_UV",
                  label: "app内访问",
                },
              ],
            },
            deepTarget: {
              type: "select",
              label: "深度优化目标",
              value: "NULL",
              condition: [
                "rules.items.ad:1",
                "target.items.target:AD_CONVERT_TYPE_PAY:NULL",
              ],
              options: [
                {
                  label: "无",
                  value: "NULL",
                },
                {
                  label: "付费roi",
                  value: "PAY",
                },
                {
                  label: "广告变现roi",
                  value: "AD",
                },
                {
                  label: "次留",
                  value: "CL",
                  unTouchable: ["target.items.targetTitle:WECHAT_APP:NULL"],
                },
              ],
            },
          },
        },
        ad: {
          title: "广告预算与出价",
          condition: ["target.items.deepTarget:!NULL", "this.origin:2"],
          items: {
            adBudget: {
              type: "input",
              valueType: "number",
              label: "广告预算",
              value: 0,
              unit: "元",
              min: 0,
              max: 1000,
              condition: ["target.items.deepTarget:!NULL", "this.origin:2:0"],
            },
            adPrice: {
              type: "input",
              valueType: "number",
              label: "广告出价",
              value: 0,
              unit: "元",
              min: 0,
              max: 1000,
              condition: ["target.items.deepTarget:!NULL", "this.origin:2:0"],
            },
          },
        },
      },
    };
  },
  methods: {
    clickTitle(title) {
      window.uni.postMessage({
        data: {
          title,
        },
      });
    },
    getValue(str) {
      let strs = str.split(".");
      let isGlobal = str.startsWith("this");
      let res = isGlobal ? this : this.form;
      let i = isGlobal ? 1 : 0;
      for (i; i < strs.length; i++) {
        res = res[strs[i]];
      }
      return res;
    },
    getOptions(rtem) {
      const replaceCondition = rtem.replaceCondition;
      if (replaceCondition) {
        for (let i = 0; i < replaceCondition.length; i++) {
          let current = this.getValue(replaceCondition[i].split(":")[0]);
          if (current.value == replaceCondition[i].split(":")[1]) {
            return rtem.replaceOptions;
          }
        }
      }
      return rtem.options;
    },
    // 禁用与启用选项
    setDisable(current, rtem) {
      let unTouchable = current.unTouchable;
      if (unTouchable) {
        for (let i = 0; i < unTouchable.length; i++) {
          let tar = this.getValue(unTouchable[i].split(":")[0]);
          if (tar.value == unTouchable[i].split(":")[1]) {
            // 存在被替换项新的value与原值不一致，需要根据current.disabledVal判断
            if (
              rtem.value == current.value ||
              rtem.value == current?.disabledVal
            ) {
              // 更改默认值，避免依旧选中默认值
              let defaultVal = unTouchable[i].split(":")[2];
              rtem.value =
                rtem.valueType == "number" ? Number(defaultVal) : defaultVal;
            }
            current.disabled = true;
            return true;
          }
        }
        current.disabled = false;
        return false;
      }
    },
    // 根据condition判断是否展示
    showCondition(current) {
      const condition = current.condition;
      if (condition) {
        for (let i = 0; i < condition.length; i++) {
          let option = condition[i].split(":")[0];
          let tar = this.getValue(option);
          let value = tar.value;
          if (option.startsWith("this")) value = tar;
          // 判断条件值
          let conditionVal = condition[i].split(":")[1];
          // 默认值
          let defaultVal = condition[i].split(":")[2];
          const setVal = () => {
            if (defaultVal) {
              // 存在默认值，需要重新设置默认值
              current.value = defaultVal;
            }
            current.show = false;
            return false;
          };
          // 当条件是不等于某个值
          if (conditionVal.includes("!")) {
            conditionVal = conditionVal.replace("!", "");
            if (value == conditionVal) {
              return setVal();
            }
          } else {
            if (value != conditionVal) {
              return setVal();
            }
          }
        }
      }
      current.show = true;
      return true;
    },
    onSubmit() {
      console.log(this.form);
      let res = {}
      for(let i in this.form){
        let items = this.form[i].items
        for(let j in items){
          if(items[j].show){
            res[j] = items[j].value
          }
        }
      }
      console.log(res)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  /* width: 1200px; */
  overflow: hidden;
}
.form-box {
  padding: 0 20px 20px 20px;
  border: 1px solid #e8eaec;
  border-radius: 8px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}
.form-box .title {
  margin: 0;
  width: 100%;
  background: #fbfcfd;
  border-bottom: 1px solid #e8eaec;
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  left: -20px;
  text-align: left;
  font-weight: bold;
}

/deep/ .el-form-item__content {
  display: flex;
  justify-content: flex-start;
}
</style>
